<template>
  <div class="home">
    <!-- 添加HelloWorld组件 -->
    <HelloWorld msg="欢迎访问金山学院牛人榜" />
    
    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 学院要闻 -->
      <div class="section">
        <div class="section-header">
          <h2 class="section-title">学院要闻</h2>
          <a href="#" class="section-more">MORE>></a>
        </div>
        <ul class="news-list">
          <li class="news-item" v-for="(news, index) in newsItems.college" :key="`college-${index}`">
            <a href="#">{{ news.title }}</a>
            <span class="news-date">{{ news.date }}</span>
          </li>
        </ul>
      </div>
      
      <!-- 通知公告 -->
      <div class="section">
        <div class="section-header">
          <h2 class="section-title">通知公告</h2>
          <a href="#" class="section-more">MORE>></a>
        </div>
        <div class="notice-list">
          <div class="notice-item" v-for="(notice, index) in noticeItems" :key="`notice-${index}`">
            <div class="notice-date">{{ notice.shortDate }}</div>
            <a href="#">{{ notice.title }}</a>
          </div>
        </div>
      </div>
      
      <!-- 金山牛人榜 -->
      <div class="section">
        <div class="section-header">
          <h2 class="section-title">金山牛人榜</h2>
          <router-link to="/ranking" class="section-more">MORE>></router-link>
        </div>
        <ul class="news-list">
          <li class="news-item" v-for="(student, index) in topStudents" :key="`student-${index}`">
            <router-link :to="`/champion/${student.id}`">{{ student.name }} - {{ student.major }} - {{ student.specialty }}</router-link>
            <span class="news-date">{{ student.level }}</span>
          </li>
        </ul>
      </div>
      
      <!-- 系部动态 -->
      <div class="section">
        <div class="section-header">
          <h2 class="section-title">系部动态</h2>
          <a href="#" class="section-more">MORE>></a>
        </div>
        <ul class="news-list">
          <li class="news-item" v-for="(news, index) in newsItems.department" :key="`department-${index}`">
            <a href="#">{{ news.title }}</a>
            <span class="news-date">{{ news.date }}</span>
          </li>
        </ul>
      </div>
      
      <!-- 专题专栏 -->
      <div class="section">
        <div class="section-header">
          <h2 class="section-title">专题专栏</h2>
          <a href="#" class="section-more">MORE>></a>
        </div>
        <img src="https://jsxy.fafu.edu.cn/_upload/article/images/8a/e5/427227b44f1285cc717a659d5e5c/0d2e38bd-4b42-44fc-bf46-336210946e76_s.jpg" alt="专题专栏" class="section-image">
      </div>
      
      <!-- 美丽金山 -->
      <div class="section">
        <div class="section-header">
          <h2 class="section-title">美丽金山</h2>
          <a href="#" class="section-more">MORE>></a>
        </div>
        <img src="https://jsxy.fafu.edu.cn/_upload/article/images/f6/9a/4a55ff5b445b9e4cb420a08837fd/6791eee9-3b1b-4d60-adef-63f622606367_s.jpg" alt="美丽金山" class="section-image">
      </div>
    </div>
    
    <!-- 快速链接区 -->
    <div class="quick-links">
      <a href="#" class="quick-link" v-for="(link, index) in quickLinks" :key="`link-${index}`">
        {{ link }}
      </a>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  },
  data() {
    return {
      newsItems: {
        college: [
          { title: '抢抓新机遇 奋力谱新篇——福建农林大学赖海榕书记、兰思仁校长等校领导莅院调研指导工作', date: '2025-03-11' },
          { title: '锚定目标 奋勇争先——"农大金山"办学亮点全扫描', date: '2025-02-27' },
          { title: '我院在武书连独立学院综合实力排名再攀新高', date: '2025-02-27' },
          { title: '我院2025届毕业生考研录取率再创新高', date: '2025-05-20' },
          { title: '我院在福建省高等学校思想政治教育研究会2024年度优秀论文评选中再获佳绩', date: '2025-05-19' },
          { title: '我院召开2024年学风建设暨学生表彰大会', date: '2025-05-19' }
        ],
        department: [
          { title: '院领导在学院（安溪）召开深入贯彻中央八项规定精神学习教育座谈会', date: '2025-05-21' },
          { title: '廉洁筑基 守正扬清—农业与食品科学系党总支举办"严守八项规定 擦亮廉洁底色"主题讲座', date: '2025-05-21' },
          { title: '信机学子勇夺第14届新华三杯全国大学生数字技术大赛多项奖项', date: '2025-05-14' },
          { title: '学院（安溪）校区组织开展"赓续红色血脉，共筑清风堡垒"党日活动', date: '2025-05-14' },
          { title: '四航托举 学子筑梦—农业与食品科学系助力学生深造', date: '2025-05-12' }
        ]
      },
      noticeItems: [
        { shortDate: '05/14', title: '关于表彰2024届毕业生就业创业工作先进个人的公示' },
        { shortDate: '05/14', title: '院领导接待日（2025年5月21日）安排通知' },
        { shortDate: '05/08', title: '关于征集我校南平办学点基础化学实验室设计方案的公告' },
        { shortDate: '04/30', title: '院领导接待日（2025年5月7日）安排通知' },
        { shortDate: '04/03', title: '关于征集我校南平办学点智能化设备及家具厨具项目设计方案的公告' },
        { shortDate: '04/02', title: '院领导接待日（2025年4月9日）安排通知' }
      ],
      topStudents: [
        { id: 'jiangwei', name: 'DUIJ', major: '计算机科学与技术专业1班', specialty: 'Java全栈开发专家', level: '最强王者' },
        { id: 'linjiabei', name: '林加贝', major: '计算机科学与技术专业1班', specialty: '全能型选手', level: '技术达人' },
        { id: 'chenhao', name: '陈日天', major: '计算机科学与技术专业1班', specialty: '全栈技术专家', level: 'AI先锋' },
        { id: 'zhangsan', name: '张三', major: '软件工程专业', specialty: '编程高手', level: '潜力之星' },
        { id: 'lisi', name: '李四', major: '网络工程专业', specialty: '网络安全专家', level: '安全卫士' }
      ],
      quickLinks: ['教务管理', '人才招聘', '信息公开', '图书馆', '书记院长信箱', '金山牛人榜']
    }
  }
}
</script>

<style scoped>
/* 主内容区 */
.main-content {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.section {
  flex: 1;
  min-width: 300px;
}

.section-header {
  border-bottom: 2px solid #c22;
  padding-bottom: 10px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
}

.section-title {
  color: #333;
  font-size: 20px;
  position: relative;
  padding-left: 10px;
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  height: 20px;
  width: 5px;
  background-color: #c22;
}

.section-more {
  color: #999;
  text-decoration: none;
  font-size: 14px;
}

.news-list {
  list-style: none;
}

.news-item {
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
}

.news-item a {
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80%;
}

.news-item a:before {
  content: "•";
  color: #c22;
  margin-right: 8px;
}

.news-date {
  color: #999;
  font-size: 14px;
}

.notice-item {
  display: flex;
  margin-bottom: 10px;
}

.notice-date {
  background-color: #c22;
  color: white;
  padding: 2px 5px;
  margin-right: 10px;
  text-align: center;
  min-width: 50px;
}

.notice-item a {
  color: #333;
  text-decoration: none;
  flex: 1;
}

.section-image {
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section-image:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* 快速链接区 */
.quick-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  padding: 20px;
  background-color: #f5f5f5;
}

.quick-link {
  background-color: #c22;
  color: white;
  text-decoration: none;
  padding: 15px 20px;
  border-radius: 5px;
  text-align: center;
  min-width: 150px;
}
</style>
